<template>
  <div>
    <a-card :bordered="false" class="mb-3">
      <div class="flex justify-between">
        <div>
          <a-button type="primary" @click="newMenu">{{ t["新增"] }}</a-button>
        </div>
        <div class="flex">
          <a-button @click="getList">
            <IconRefresh />
          </a-button>
        </div>
      </div>
    </a-card>
    <a-card :bordered="false">
      <a-table
        v-model:expandedKeys="expandedKeys"
        :loading="loading"
        :columns="translateColumns(columns)"
        size="medium"
        :pagination="{
          pageSize: 20
        }"
        :data="treeData"
        row-key="menuId"
      >
        <!-- <template #visible="{ record }">
        <a-radio-group v-model="record.visible" >
          <a-radio value="1">否</a-radio>
          <a-radio value="0">是</a-radio>
        </a-radio-group>
      </template> -->
        <template #menuName="{ record }">
          {{ record.menuName }}
        </template>
        <template #actions="{ record }">
          <div class="flex gap-2 justify-center">
            <a-button class="p-2" type="text" @click="editMenu(record)">
              <IconEdit />
            </a-button>
            <XDelete @ok="deleteById(record.menuId)">
              <IconDelete />
            </XDelete>
          </div>
        </template>
      </a-table>
    </a-card>

    <a-modal v-model:visible="showForm" :title="t['操作']" :footer="false" draggable>
      <a-form
        :model="formData"
        auto-label-width
        layout="vertical"
        size="medium"
        required
        @submit-success="save"
      >
        <a-form-item :label="t['菜单名称']" field="menuName" required>
          <a-input v-model="formData.menuName"></a-input>
        </a-form-item>
        <a-form-item :label="t['父级']">
          <a-tree-select
            v-model="formData.parentId"
            :expanded-keys="[]"
            class="w-full"
            tree-checked-strategy="parent"
            :data="root"
            :field-names="{
              title: 'menuName',
              key: 'menuId',
              icon: 'none'
            }"
          ></a-tree-select>
        </a-form-item>
        <a-form-item field="orderNum" :label="t['排序']" required>
          <a-input-number v-model="formData.orderNum"></a-input-number>
        </a-form-item>

        <a-form-item field="component" :label="t['组件路径']">
          <a-input v-model="formData.component"></a-input>
        </a-form-item>
        <a-form-item field="icon" :label="t['图标']">
          <a-popover trigger="click" position="bottom" :arrow-style="{ display: 'none' }">
            <a-input v-model="formData.icon"></a-input>
            <template #content>
              <div class="select-icon">
                <a-grid :cols="12" :row-gap="8">
                  <a-grid-item
                    v-for="(item, key) in Object.keys(ArcoVueIcon)"
                    :key="key"
                    @click="selectIcon(item)"
                  >
                    <div class="icon-item flex justify-center items-center">
                      <component :is="item"></component>
                    </div>
                  </a-grid-item>
                </a-grid>
              </div>
            </template>
          </a-popover>
        </a-form-item>
        <a-form-item field="path" :label="t['菜单类型']">
          <a-radio-group
            v-model="formData.menuType"
            :options="translateOptions(typeOptions)"
          ></a-radio-group>
        </a-form-item>
        <a-form-item field="menuType" :label="t['路由']">
          <a-input v-model="formData.path" :options="typeOptions"></a-input>
        </a-form-item>
        <!-- <a-form-item v-if="formData.menuType === 'C'" label="权限字符" field="perms">
          <a-input v-model="formData.perms"></a-input>
        </a-form-item> -->
        <a-form-item field="visible" :label="t['是否显示']">
          <a-radio-group v-model="formData.visible">
            <a-radio value="0">{{ t["是"] }}</a-radio>
            <a-radio value="1">{{ t["否"] }}</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item>
          <a-button html-type="submit">{{ t["保存"] }}</a-button>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { addMenu, delMenu, updateMenu } from "@/api/service/menu/menu";
import { IMenu } from "@/api/service/menu/types";
import { listMenu } from "@/api/service/system/menu";

import { buildTree } from "@/utils/tree";
import ArcoVueIcon from "@arco-design/web-vue/es/icon";

import { columns } from "./columns";
import { formData, resetForm, showForm } from "./form";

const t = translate("公共模块");
const treeData = ref();
const expandedKeys = ref([]);

const selectIcon = (item: any) => {
  formData.value.icon = item;
};
const root = ref();
const loading = ref(true);
const typeOptions = [
  {
    label: "多级菜单",
    value: "M"
  },
  {
    label: "按钮",
    value: "C"
  }
];

/**
 * 注释: 获取列表
 *
 * */
const getList = async () => {
  loading.value = true;
  const { data } = await listMenu();
  treeData.value = buildTree(data);
  loading.value = false;

  const parentMenu = [
    {
      menuId: "0",
      menuName: t.value?.["主页"],
      children: treeData.value
    }
  ];

  root.value = parentMenu;
};

const deleteById = async (id: string) => {
  if (id) {
    const result = await delMenu([id]);
    getList();
  }
};
onMounted(() => {
  getList();
});

/**
 * 注释: 新的菜单
 *
 * */
const editMenu = (item: IMenu) => {
  formData.value = {
    ...item
  };
  showForm.value = true;
};

/**
 * 注释: 新的菜单
 *
 * */
const newMenu = () => {
  resetForm();
  formData.value.visible = "0";
  formData.value.menuType = "C";
  formData.value.parentId = "0";
  showForm.value = true;
};
const createNewMenu = (data: IMenu) => {
  resetForm();
};
/**
 * 注释: 保存
 *
 * */
const save = async () => {
  let result = null;
  if (formData.value.menuId) {
    result = await updateMenu(formData.value);
  } else {
    result = await addMenu(formData.value);
  }
  getList();
  resetForm();
  showForm.value = false;
};
</script>

<style scoped lang="scss">
.select-icon {
  width: 500px;
  height: 300px;
  overflow-y: auto;
  .icon-item {
    display: flex;
    width: 20px;
    height: 20px;
    &:hover {
      cursor: pointer;
      background: #eee;
    }
  }
}
</style>
